<template>
  <view class="shopCarContain padding-bottom">
    <view class="shopCar">
      <view class="imgBox">
        <img class="img" src="@/static/购物 购物车 订购.png" alt="" />
      </view>
    </view>
    <view class="computed">
      <view>￥0</view>
      <view class="count">未选择商品</view>
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style lang="less">
.shopCarContain {
  height: 100rpx;
  width: 100%;
  background: #f7ac03;
  bottom: 0;
  position: fixed;
  display: flex;
  justify-content: space-between;
  color: #fff;

  .shopCar {
    height: 150rpx;
    width: 150rpx;
    border-radius: 50%;
    background: #f7ac03;
    margin-top: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50rpx;
    flex-shrink: 0; // 控制块不被挤压

    .imgBox {
      width: 120rpx;
      height: 120rpx;
      background: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.8;

      img {
        height: 90rpx;
        width: 90rpx;
        border-radius: 50%;
      }
    }
  }

  .computed {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-left: 20rpx;
    align-items: center;

    .count {
      width: 220rpx;
      height: 80rpx;
      border-left: 3px solid #fcdb96;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
